<template lang="">
    <div class="app-container">
        <el-row style="margin-bottom: 20px" :gutter="10">
            <el-col :span="1.5">
                <el-input v-model="queryParams.planNameKeyword" placeholder="请输入救援计划名称关键词" clearable size="mini" />
            </el-col>
            <el-col :span="1.5">
                <!-- 执行中或者已执行 -->
                <el-select v-model="queryParams.status" placeholder="请选择任务状态" clearable size="mini">
                    <el-option label="全部任务" :value="0"></el-option>
                    <el-option label="执行中任务" :value="1"></el-option>
                    <el-option label="已执行任务" :value="2"></el-option>
                </el-select>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" @click="getList" icon="el-icon-search" size="mini">筛选</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" @click="getList" icon="el-icon-refresh" size="mini">手动刷新任务</el-button>
            </el-col>
        </el-row>
        <el-table v-loading="loading" :data="list" border>
            <el-table-column label="救援计划" align="center" prop="planName" width="220" />
            <el-table-column label="处置流程" align="center" prop="nodeName" width="180"> </el-table-column>
            <el-table-column label="任务内容" align="left" prop="taskContent">
                <template slot-scope="scope">
                    <FlashTaskModule ref="flashTaskModule" :needFlash="scope.row.urgent == 1 && scope.row.status == 1" :taskContent="scope.row.taskContent" />
                </template>
            </el-table-column>
            <el-table-column label="接收时间" align="center" prop="startTime" width="160" />
            <el-table-column label="任务状态" align="center" prop="status" width="80">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.status == 1" size="mini">执行中</el-tag>
                    <el-tag type="success" v-if="scope.row.status == 2" size="mini">已完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="250">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleDetail(scope.row)">任务详情</el-button>
                    <el-button size="mini" type="text" @click="handleExecute(scope.row)" v-if="scope.row.status != 2">执行任务</el-button>
                    <el-button size="mini" type="text" @click="chat(scope.row)">任务沟通</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />

        <handle-son-tasks ref="handleSonTasks" @handleOk="getList" />
        <task-execute ref="taskExecute" @handleOk="getList" />
        <task-detail ref="taskDetail" />
        <HandleSonTaskDetail ref="sonTaskDetail" />
        <ChatIM ref="chatIM" />
    </div>
</template>
<script>
/**
 * 演练任务列表页面
 * 当前页面主要用于二级保障部门和保障科队的任务列表
 * 二级保障部门显示一级任务，执行的时候弹出弹窗显示二级任务列表
 * 保障科队显示二级任务列表，执行的时候弹出任务执行窗口
 */
import { getHandleTaskList } from "@/api/response/handle";
import HandleSonTasks from "./components/HandleSonTasks.vue";
import TaskExecute from "./components/TaskExecute.vue";
import TaskDetail from "./components/HandleTaskDetail.vue";
import HandleSonTaskDetail from "./components/HandleSonTaskDetail.vue";
import chatMixin from "@/mixins/chatMixin";
import ChatIM from "@/components/ChatIM/task.vue";
import * as Auth from "@/utils/auth";
import { truncateString } from "@/utils/ruoyi";
import FlashTaskModule from "./module/FlashTaskModule.vue";

export default {
    name: "HandleTaskList",
    mixins: [chatMixin],
    components: {
        HandleSonTasks,
        TaskExecute,
        TaskDetail,
        HandleSonTaskDetail,
        ChatIM,
        FlashTaskModule,
    },
    data() {
        return {
            // 遮罩层
            loading: false,
            // 总条数
            total: 0,
            // 应急演练计划表格数据
            list: [],
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 20,
                status: 0,
                planNameKeyword: "",
            },
        };
    },
    mounted() {
        this.getList();
    },
    methods: {
        getList() {
            let userId = Auth.getUserId();
            getHandleTaskList(userId, this.queryParams).then(res => {
                this.list = [];
                res.rows.forEach(r => {
                    r.taskContent = truncateString(r.taskContent, 50);
                    this.list.push(r);
                });
                this.total = res.total;
            });
        },
        isSonTask(row) {
            return row.parentId != null;
        },
        handleExecute(row) {
            // 执行任务
            // 如果是一级任务，弹出二级任务列表弹窗
            // 如果是二级任务，直接弹出任务执行窗口
            if (row.parentId == "0") {
                // 一级任务
                this.$refs.handleSonTasks.showList(row.id, row.handleId, row.levelId);
            } else {
                // 二级任务
                this.$refs.taskExecute.showDialog(row);
            }
        },
        handleDetail(row) {
            if (row.parentId == "0") {
                this.$refs.taskDetail.showDialog(row);
            } else {
                this.$refs.sonTaskDetail.showDialog(row);
            }
        },
        chat(row) {
            this.initTaskChat("handle", row.handleId, row.id, "");
        },
    },
};
</script>
<style lang=""></style>
